<template>
  <li :class="wrapClass">
    <h3 :class="headClass"
        :style="headStyle"
        :draggable="currentDraggable"
        @drag.stop="drag"
        @dragstart.stop="dragstart($event)"
        @dragenter.stop="dragenter($event)"
        @dragleave.stop="dragleave($event)"
        @dragover.stop="dragover($event)"
        @dragend.stop="dragend($event)"
        @drop.stop="drop($event)"
        ref="treeNodeHeadRef"
        @click.stop="clickSelect($event)">

      <!--展开收起-->
      <span v-if="hasTrigger" :class="triggerClass" @click.stop="toggle($event)"><span>展开/收起</span></span>

      <!--如果支持懒加载-->
      <span v-if="hasLoading" :class="loadingWrapClass">
        <i :class="loadingClass"></i>
      </span>

      <!--复选框-->
      <label v-if="currentShowCheckBox && !treeNodeData.hideCheckbox" :class="checkboxClass" @click.stop>
        <input type="checkbox" :disabled="disabled" v-model="checked" @change="changeCheckbox($event)" />
        <span></span>
      </label>
      <span v-if="showIcon" :class="iconClass">
        <img :src="treeNodeData.icon" @load="handleLoadIcon" @error="loadError" alt="图标" />
      </span>
      <!--treeNodeData.name换成计算属性,因为需要加标签进去，所以需要换成 v-html-->
      <span ref="treeNodeNameRef" :class="nameClass" :title="currentNameText" v-html="currentName" @dblclick="dblclickMendName"></span>
      <!--双击修改树节点名称   -->
      <input ref="inputText"
             type="text"
             v-if="canMendName"
             v-model="treeNodeName"
             :class="inputClass"
             @keydown.enter.stop="handleInputEnter($event)"
             @blur="handleInput($event)" />
    </h3>
    <!--节点的内容-->
    <aty-collapse-transition v-if="treeNodeData.children">
      <ul :class="treeContentClass" v-show="open">
        <aty-tree-node
          v-for="(itemChild,indexChild) in treeNodeData.children"
          :key="itemChild.id"
          :parent="currentVm"
          :index="index+'-'+indexChild"
          :showIcon="showIcon"
          :showCheckbox="showCheckbox"
          :canMendName="canMendName"
          :lazyLoad="lazyLoad"
          :draggable="draggable"
          :connectParent="connectParent"
          :cascade="cascade"
          :tree-node-data="itemChild" />
      </ul>
    </aty-collapse-transition>
  </li>
</template>
<script type="text/ecmascript-6" src="./index.js"></script>
